<template>
	<view class="fileUpload" :class="APPTheme">
		<uni-nav-bar fixed status-bar title="上传列表" left-icon="back" :color="APPTheme=='theme-light'?'#000000':'#ffffff'" :background-color="APPTheme=='theme-light'?'#ffffff':'#000000'"
		 @clickLeft="$lizhao.lznavigate.lzNavigateBack()">
			<view slot="left">返回</view>
		</uni-nav-bar>
		<view class="center">
			<view class="theme-bg list-item" v-for="(item,index) in lzuploadFile" :key="index">
				<view class="i-left">
					<image :src="computedFileType(item)"></image>
				</view>
				<view class="i-center">
					<view class="i-center-top lz-ellipsis-1">{{item.file.name}}</view>
					<view class="i-center-bottom">
						<text>{{computeFileSize(item.file.size)}}</text>
					</view>
					<u-line-progress active-color="#00ad00" :percent="item.progress" height="22"></u-line-progress>
				</view>
				<view class="i-right">
					<!-- <uni-icons type="settings" color="#00aaff"></uni-icons> -->
				</view>
			</view>
			<u-empty text="暂无内容" class="u-empty" mode="data" v-if="lzuploadFile.length==0" :margin-top="200"></u-empty>
		</view>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	let that
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		components: {},
		data() {
			return {
				copylzuploadFile:[]
			}
		},
		computed: {
			...mapGetters(['APPTheme', 'userInfo', 'api','lzuploadFile']),
			//计算图片属性
			computedFileType() {
				return (item) => {
					let suffix='png'
					if(item.file.type=='image/png'||item.file.type=='image/jpg'){
						suffix='png'
					}
					return that.$lizhao.lzfile.lzGetFileType(suffix)
				}
			},
			//计算文件大小
			computeFileSize() {
				return (size) => {
					return that.$lizhao.lzfile.lzGetFileSize(size)
				}
			}
		},
		onLoad(e) {
			that = this
			//计算上传进度
			that.computeProgress()
		},
		onShow() {
			//设置主题颜色
			that.GLOBAL.setThemeColor(that.APPTheme)
		},
		methods: {
			//计算上传进度
			computeProgress(){
				that.lzuploadFile.forEach((item,index)=>{
					that.lzuploadFile[index].progress=0
					item.uploadTask.onProgressUpdate((res)=>{
						console.log('上传进度' + res.progress);
						that.$set(that.lzuploadFile[index],'progress',res.progress)
					})
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.fileUpload {
		height: 100%;
		.list-item{
			display: flex;width: 100%;align-items: center;padding: 10rpx 20rpx;box-sizing: border-box;
			.i-left{
				width: 45px;height: 45px;display: flex;justify-content: center;align-items: center;margin-right: 5px;
				image{
					width: 30px;height: 30px;
				}
			}
			.i-center{
				font-size: $font_size-16;max-width: 80%;width: 500px;
				.i-center-top{
					overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
				}
				.i-center-bottom{
					font-size: $font_size-12;margin-top: 5px;
					text{
						margin-right: 5px;color: #888;
					}
				}
			}
			.i-right{
				width: 30px;height: 100%;display: flex;justify-content: center;align-items: center;
			}
		}
		.list-item:active{
			background-color: $bg-active-light;
		}
	}
</style>
